{extend name="Public:mobile_base" /}

{block name="title"}<title>上啦加载更多，下拉刷新</title>{/block}
{block name="stylejs"}

<link rel="stylesheet" href="{$Think.WWW_ROOT}/public/static/common/dropload/dropload.css">
<script type="text/javascript" src="{$Think.WWW_ROOT}/public/static/common/jQuery-2.1.4.min.js" ></script>
<script type="text/javascript" src="{$Think.WWW_ROOT}/public/static/common/layerm/layer.js" ></script>
<script type="text/javascript" src="{$Think.WWW_ROOT}/public/static/common/dropload/dropload.js" ></script>
<style>
    *{
        margin: 0;
        padding:0;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-text-size-adjust:none;
    }
    html{
        font-size:10px;
    }
    body{
        background-color: #f5f5f5;
        font-size: 1.2em;
    }
    .header{
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #ccc;
        background-color: #eee;
    }
    .header h1{
        text-align: center;
        font-size: 2rem;
        font-weight: normal;
    }
    .content{
        padding-bottom: 40px;
        background-color: #fff;
    }
    .content .item{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align:center;
        -webkit-box-align:center;
        box-align:center;
        -webkit-align-items:center;
        align-items:center;
        padding:3.125%;
        border-bottom: 1px solid #ddd;
        color: #333;
        text-decoration: none;
    }
    .content .item img{
        display: block;
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
    }
    .content .item h3{
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-height: 40px;
        overflow: hidden;
        line-height: 20px;
        margin: 0 10px;
        font-size: 1.2rem;
    }
    .content .item .date{
        display: block;
        height: 20px;
        line-height: 20px;
        color: #999;
    }
    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    .footer{
        position: fixed;
        left: 0;
        bottom: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 40px;
    }
    .footer a{
        position: relative;
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        line-height: 40px;
        text-align: center;
        color: #666;
        background-color: #eee;
        text-decoration: none;
    }
    .footer a:before{
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        width: 1px;
        height: 20px;
        background-color: #ccc;
    }
    .footer a:first-child:before{
        display: none;
    }
</style>
{/block}
{block name="content"}
	<!-- html结构 -->
 	<div class="content">
		<div class="lists">
		 
		</div>
	</div>
	<!-- html结构 -->

{/block} 

{block name="js"}
<script>
	$(function(){
		var page = 1;
		$('.content').dropload({
			scrollArea : window,
			domUp : {
				domClass   : 'dropload-up',
				domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
				domUpdate  : '<div class="dropload-update">↑释放更新</div>',
				domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
			},
			domDown : {
				domClass   : 'dropload-down',
				domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
				domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
				domNoData  : '<div class="dropload-noData">没有了</div>'
			},
			loadUpFn : function(me){
				page = 1;
				getMoreData(me);
				me.resetload();
			},
			loadDownFn : function(me){
				getMoreData(me);
			},
			threshold : 50
		});
		 
		function getMoreData(me){
			$.get('{:url("index")}',{page:page},function(data){
			
				var list = data.data;
				var html = '';
				if(list.length > 0){
					for(var i = 0;i < list.length;i++){
						html += '<a class="item opacity" href="'+list[i].link+'">'
                                        +'<img src="'+list[i].pic+'" alt="">'
                                        +'<h3>'+list[i].title+'</h3>'
                                        +'<span class="date">'+list[i].date+'</span>'
                                    +'</a>';
					}
					
					if(page == 1){
						$('.lists').html(html);
						me.unlock();
						me.noData(false);
					}else{
						$('.lists').append(html);
					}
					 
				}else{
					// 锁定
					me.lock();
					// 无数据
					me.noData(); 
				}
				page++;
				//插件状态重置
				me.resetload();  
			});
		}
	});
</script>
{/block}